<template>
  <div class="main" style="margin-top: -20px">
    <el-row >
      <!-- 问题列表 -->
      <el-col :span="10" style="margin-left:17%;margin-top: 20px">
        <el-card :body-style="{ padding: '0px' }" shadow="hover" v-for="(d,index) in questionList" :key="index"  style="margin-bottom: 10px">
          <div style="padding-left: 14px;padding-top: 20px;padding-right: 20px">
            <el-link  :underline="false" @click="openQuestion(questionList[index])"><span style="font-weight: bold;font-size: 20px" >{{questionList[index].content}}</span></el-link>
<!--            <div class="bottom clearfix" style="margin-top: 10px">-->
<!--              <span class="question-class" >{{questionList[index].content}}</span>-->
<!--              &lt;!&ndash;                <PureEditor :content="articleList[index].content" class="article-class"></PureEditor>&ndash;&gt;-->
<!--            </div>-->
          </div>
          <div style="padding-left: 14px;padding-bottom: 20px;padding-top: 13px">
            <el-button type="primary"  class="like-btn" icon="el-icon-caret-top" size="small" @click="Answer(questionList[index].id)">我要回答</el-button>
            <el-button type="primary" icon="el-icon-caret-bottom" size="small" @click="remove(index)">不感兴趣</el-button>
            <i class="el-icon-s-promotion share" @click="share">分享</i>
            <i class="el-icon-star-on share" @click="collect">收藏</i>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧边栏 -->
      <el-col :span="6" style="margin-top: 10px">
        <SideMenu></SideMenu>
      </el-col>
    </el-row>
    <AnswerDialog ref="answerDialog" :ds-id="quesId"></AnswerDialog>
  </div>
</template>

<script>

    import SideMenu from "../common/SideMenu";
    import AnswerDialog from "./AnswerDialog";
    export default{
      name: "QuestionDialog",
      components: {AnswerDialog, SideMenu},
      data() {
        return {
          pageBean:{
            pageNum:1,
            pageSize:20,
            content:''
          },
          questionList:[],
          quesId:-1
        };
      },
      created() {

        this.fetchData();
      },
      methods: {
        share() {
          alert("分享事件")
        },
        collect() {
          alert("收藏事件")
        },
        fetchData()
        {
          this.$http.post("http://localhost:8989/fornote/question/selectQuestion",this.pageBean).then(response =>{
            // this.$forceUpdate();
            this.questionList=response.data.data.list;
            console.log(this.questionList);
          })
        },
        openQuestion(val)
        {
          // console.log(val);
          //跳转到文章显示页面
          this.$router.push({path: '/showQuestion',query:{ question:val}})
        },
        remove(index)
        {
          // this.questionList.remove(index);
          this.questionList.splice(index,1);
          this.$message("下次将为您减少此类推荐！")

        },
        Answer(quesId)
        {
          console.log(quesId);
          this.quesId=quesId;
          this.$refs.answerDialog.init();
        }
      }
    }
</script>

<style scoped>
  .question-class{
    font-weight: 500;
    font-size: 14px;
    height: 57px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

</style>
